{extend name="common/index" /}

{block name="title"}
<script type="text/html">
</script>

<title>{$title}</title>{/block}
{block name="main"}
<div class="layui-fluid table">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    {$title}
                    {if (!empty($create_url))}
                    <div class="layui-input-inline pull-right">
                        <a data-href="{$create_url}" data-title="新增" admin-event="formLayer" refresh="" class="layui-btn layui-btn layui-btn-radius layui-btn-normal" style="margin-top:6px;">
                            新增
                        </a>
                    </div>
                    {/if}
                </div>

                <div class="layui-card-body admin-table">
                    <!--//搜索框-->
                    <div class="layui-row admin-table-action">
                        <div class="layui-col-md12 search-form">
                            <div class="layui-form layui-form-pane search layui-row">
                                <div class="layui-form-item layui-row ">
                                    <label class="layui-form-label">原手机号</label>
                                    <div class="layui-input-inline layui-col-md2">
                                        <input type="text" name="front_mobile" placeholder="请输入" value="" autocomplete="off" class="layui-input">
                                    </div>
                                    <label class="layui-form-label" style="width: 200px;">换绑后手机号</label>
                                    <div class="layui-input-inline layui-col-md2">
                                        <input type="text" name="after_mobile" placeholder="请输入" value="" autocomplete="off" class="layui-input">
                                    </div>
                                    <button lay-filter="search" lay-submit="" class="layui-btn  layui-btn-sm layui-btn-radius layui-btn-primary search-submit">
                                        筛选
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <table id="table" lay-filter="table"></table>

                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="footer"}
<script type="text/javascript">

    //初始化参数
    var cols = init_cols({$cols|json_encode|raw});
    var list_url = '{$list_url}';
    //初始化表格字段
    function init_cols(cols){
        var arr = [];
        cols.forEach((val) => {
            if(val.type == 'button'){
                val.templet = function (d) {
                    var str = '';
                    d.LAY_COL.option.forEach((v) => {
                        if(v[0] == d[d.LAY_COL['field']]){
                            var color = 'layui-btn-primary';
                            if(v[2] == ''){
                                color = '';
                            }else if(v[2] != undefined){
                                color = 'layui-btn-'+v[2];
                            }
                            str = '<button type="button" class="layui-btn layui-btn-xs '+color+'">'+v[1]+'</button>';
                        }
                    })
                    return str;
                }
            }else if(val.type == 'img'){
                val.templet = function (d) {
                    var str = '';
                    d[d.LAY_COL['field']].split(',').forEach((elem, index) => {
                        if(elem != ''){
                            str += '<img style="padding-left: 10px;" src="'+elem+'" class="view_cp" width="auto" height="100%">';
                        }
                    });
                    return str;
                }
            }
            arr.push(val);
        });
        return cols;
    }

    layui.config({
        base: '/vendor/layui-admin/layui/modules/js/' //静态资源所在路径
    });

    layui.define(['table','form','admin','laydate'], function(exports) {
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var table_filter = {};

        table.render({
            elem: '#table'
            , url: list_url
            , cols: [cols]
            , page: true
            , limit: 20
            , height: 'full-180'
            ,toolbar: true //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , text: {
                none: '无数据' //默认：无数据。
            }
            , even: true
        });


        //筛选框监听
        form.on('submit(search)', function(data){
            table_filter = data.field;
            reload();
            return false;
        });
        //重载 刷新
        $('#layui-icon-refresh').click(function () {
            reload();
        });
        //重载 刷新
        function reload(){
            table.reload('table',{
                where: {
                    filter:table_filter
                }
            });
        }
        exports('level', {});
    });
</script>

{/block}
